(function () {
    const comment = document.querySelector(".comment");
    const comment1 = document.querySelector(".comment1")
    const comment2 = document.querySelector(".comment1-1")
    const url = "https://www.fastmock.site/mock/02691fc789f6ebb9494430456d16e379/blog-ingles/data"
    axios.get(url).then(function (res) {
        let blogs = res.data.list;
        blogs.forEach(blog => {
            comment.insertAdjacentHTML("beforeend", `
            <div class="comment1">
            <img class="inside" src="./images/17f1254d04f8eed99c7c3a155e72384@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">${blog.title}</h3>
                <h3 class="comment-new2">${blog.date}</h3>
            </span>
            <span class="comment-new3">${blog.desc} </span>
             <div class="comment1-1">
                <img class="inside1" src="./images/4-1Z302144215@2x.png" alt="">
                <span class="comment-new4">
                    <h3>${blog.title1}</h3>
                    <h3>${blog.date1}</h3>
                </span>
                <span>${blog.desc1}</span>
                </div>
         </div>
            `);
        });
    });
    axios.get(url).then(function (res) {
        let blogs = res.data.list;
        blogs.forEach(blog => {
            comment2.insertAdjacentHTML("beforeend", `
            <img class="inside1" src="./images/4-1Z302144215@2x.png" alt="">
            <span class="comment-new4">
                <h3>${blog.title1}</h3>
                <h3>${blog.date1}</h3>
            </span>
            <span class="comment-new5">${blog.desc1}</span>
            `);
        });
    });

    axios.get(url).then(function (res) {
        let blogs = res.data.list;
        blogs.forEach(blog => {
            comment.insertAdjacentHTML("beforeend", `
            <div class="comment2">
            <img class="inside" src="./images/blog-single/图层 8@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">${blog.title}</h3>
                <h3 class="comment-new2">${blog.date}</h3>
            </span>
            <span class="comment-new3">${blog.desc} </span>
        </div>
            `);
        });
    });
    axios.get(url).then(function (res) {
        let blogs = res.data.list;
        blogs.forEach(blog => {
            comment.insertAdjacentHTML("beforeend", `

            <div class="comment3">
            <img class="inside" src="./images/31c0042cefee2c328bafb1e0d23e410@2x.png" alt="">
            <span class="comment-new">
                <h3 class="comment-new1">${blog.title}</h3>
                <h3 class="comment-new2">${blog.date}</h3>
            </span>
            <span class="comment-new3">${blog.desc}</span>

        </div>
            `);
        });
    });

    let btnPost = document.querySelector('#btn-post')
    btnPost.addEventListener('click', function () {
        let nicknameInput = document.querySelector('#nickname')
        let emailInput = document.querySelector('#email')
        let contentInput = document.querySelector('#content')

        axios.post('http://81.70.162.221:3000/postComment', {
            nickname: nicknameInput.value,
            email: emailInput.value,
            content: contentInput.value,
            articleId: id
        }).then(function (res) {
            if (res.data == 'success') {
                console.log('1111');
            }
        });
    }, false)



})();

(function () {

    let middle = document.querySelector(".middle")
    let head = document.querySelector(".head")
    let id = location.search.split("=")[1];
    console.log(id);
    // 请求数据
    let url1 = "http://81.70.162.221:3000/getBlog?id=" + id;
    axios.get(url1).then(function (res) {
        console.log(res);
        let blogs = res.data;
        middle.insertAdjacentHTML("afterbegin", `
      <div class="text1">
         <span>${blogs.content}</span>
      </div>
          <img class="img1" src="./images/blog-single/bdc2fb559b324259a3d4bbfd0962cf60@2x.png" alt="">
      <div class="text2">
        <span>${blogs.content}</span>
      </div>
       `)
    })
    let id1 = location.search.split("=")[1];
    let url2 = "http://81.70.162.221:3000/getBlog?id=" + id1;
    axios.get(url1).then(function (res) {
        console.log(res);
        let blogs = res.data;
        head.insertAdjacentHTML("afterbegin", `
        <div class="wenzi">
        <h2 class="span1">${blogs.abstract}</h2>
        <span class="span2">${blogs.createTime}</span>
    </div>
       `)
    })
})();